﻿; (function ($) {
    $.fn.fancySelect = function (opts) {
        var options = $.extend({},
        $.fn.fancySelect.defaultSettings, opts),
        documentEl = ($.browser.msie || $.browser.mozilla || $.browser.opera) ? document.documentElement : document.body;
        return this.each(function () {
            var $this = this,
            el = $(this),
            parent = el.parent(),
            targetEl = $('<span class="fancySelect ' + options.fancyClass + '"></span>'),
            zIndex = targetEl.css('zIndex'),
            titleEl = $('<div>' + el.find('option:selected').html() + '<span></span></div>'),
            containerEl = $('<ul></ul>'),
            baseHeight,
            state = 0,
            show = function () {
                if (state) return;
                targetEl.css('zIndex', 111111);
                containerEl.css({
                    display: 'block',
                    'height': 'auto'
                });
                baseHeight = containerEl.height();
                var height = baseHeight;
                if (baseHeight + containerEl.offset().top > documentEl.scrollTop + documentEl.clientHeight && !($.browser.msie && $.browser.version < 6)) {
                    height = documentEl.scrollTop + documentEl.clientHeight - containerEl.offset().top - 5;
                    if (height < 50) {
                        height = 50
                    }
                };
                containerEl.css('height', 0).animate({
                    'height': height
                },
                options.speed, 'swing',
                function () {
                    if (height < baseHeight) {
                        containerEl.css({
                            'overflow-y': 'auto',
                            'height': height
                        })
                    };
                    state = 1
                });
                el.trigger('focus')
            },
            hide = function () {
                if (!state) return;
                containerEl.css({
                    'overflow-y': 'hidden'
                }).animate({
                    height: 0
                },
                options.speed, 'swing',
                function () {
                    containerEl.css({
                        display: 'none',
                        'zIndex': 222221
                    });
                    targetEl.css('zIndex', zIndex);
                    state = 0
                });
                el.trigger('blur')
            },
            htmls = '';
            this.select = function (num) {
                var selectEl = $(targetEl.find('li')[num]),
                value = selectEl.data('value');
                selectEl.addClass('selected').siblings().removeClass('selected');
                titleEl.html(selectEl.html() + '<span></span>');
                $(el.find('option')[num]).attr('selected', 'selected');
                el.trigger('change');
                if ($.isFunction(options.onChange)) {
                    options.onChange({
                        index: num,
                        value: value,
                        text: selectEl.html(),
                        target: $this
                    })
                }
            };
            this.update = function () {
                var num = el.find('option').index(el.find('option:selected'));
                this.select(num)
            };
            el.on('change',
            function () {
                var value = el.val(),
                selectEl = $(targetEl.find('li [data-value="' + value + '"]'));
                selectEl.addClass('selected').siblings().removeClass('selected')
            });
            $.each(el.find('option'),
            function () {
                htmls += '<li data-value="' + $(this).attr("value") + '"';
                if ($(this).attr('selected') == 'selected') htmls += ' class="selected"';
                htmls += '>' + $(this).html() + '</li>'
            });
            targetEl.append(titleEl, containerEl).css({
                width: el.width() - (targetEl.outerWidth() - targetEl.width()),
                display: 'inline-block'
            }).insertAfter(el);
            titleEl.css({
                width: '100%'
            });
            containerEl.append($(htmls));
            baseHeight = containerEl.height();
            containerEl.css({
                width: targetEl.outerWidth() - (containerEl.outerWidth() - containerEl.width()) + 2,
                height: 0,
                display: 'none'
            });
            el.css({
                display: 'none'
            });
            targetEl.find('li').mouseenter(function (e) {
                $(this).addClass('over')
            }).mouseleave(function () {
                $(this).removeClass('over')
            }).click(function (e) {
                $this.select(targetEl.find('li').index($(this)));
                if (!options.selectHide) {
                    e.preventDefault();
                    e.stopPropagation()
                }
            });
            targetEl.on(options.showEvent, show).mouseenter(function (e) {
                targetEl.addClass('over')
            }).mouseleave(function () {
                targetEl.removeClass('over')
            });
            $(document).click(hide);
            el.data('fancyEl', this)
        })
    };
    $.fn.fancySelect.defaultSettings = {
        fancyClass: '',
        showEvent: 'click',
        selectHide: true,
        speed: 300,
        zIndex: 1001,
        onChange: $.noop
    }
})(jQuery);